import React from 'react';
import { Result, Button, Card } from 'antd';
import { HomeOutlined, ReloadOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import styles from './ErrorFallback.module.css';

const ErrorFallback = ({ error, resetErrorBoundary }) => {
    const navigate = useNavigate();

    const handleGoHome = () => {
        navigate('/');
        if (resetErrorBoundary) {
            resetErrorBoundary();
        }
    };

    const handleReload = () => {
        window.location.reload();
    };

    return (
        <div className={styles.errorContainer}>
            <Card className={styles.errorCard}>
                <Result
                    status="error"
                    title="应用遇到了一些问题"
                    subTitle="抱歉给您带来不便，请尝试以下操作"
                    extra={[
                        <Button
                            type="primary"
                            key="home"
                            icon={<HomeOutlined />}
                            onClick={handleGoHome}
                        >
                            返回首页
                        </Button>,
                        <Button
                            key="reload"
                            icon={<ReloadOutlined />}
                            onClick={handleReload}
                        >
                            重新加载
                        </Button>,
                    ]}
                />

                {process.env.NODE_ENV === 'development' && (
                    <div className={styles.errorDetails}>
                        <h4>错误详情（仅开发环境显示）:</h4>
                        <pre className={styles.errorStack}>
              {error.message}
                            {"\n"}
                            {error.stack}
            </pre>
                    </div>
                )}
            </Card>
        </div>
    );
};

export default ErrorFallback;